<template>
<div class="registerContainer">
  <div class="content">
    <div class="mainContent">
      <h1>注册</h1>
      <el-form
          label-position="top"
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 460px;margin-top: 20px"
      >
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password" type="password"/>
        </el-form-item>
        <el-form-item label="再次输入密码">
          <el-input v-model="formLabelAlign.repeatPassword" type="password"/>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formLabelAlign.email"/>
        </el-form-item>
        <el-form-item label="支付密码">
          <el-input v-model="formLabelAlign.payPassword"/>
        </el-form-item>
      </el-form>
      <el-button
          type="primary"
          @click="regist"
          :loading="loading"
          style="width: 100%;margin-top: 20px">注册</el-button>
    </div>
  </div>
</div>
</template>

<script setup>


import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router";

const loading = ref(false)

const formLabelAlign = reactive({
  username: '',
  password: '',
  repeatPassword: '',
  email: '',
  payPassword: ''
})

const regist = () => {
  loading.value = true
  if (formLabelAlign.password !== formLabelAlign.repeatPassword) {
    ElMessage({
      message: '两次输入密码不一致',
      type: 'warning'
    })
    loading.value = false
  } else if (formLabelAlign.username === '' || formLabelAlign.password === '' ||
      formLabelAlign.repeatPassword === '' || formLabelAlign.email === '' ||
      formLabelAlign.payPassword === '') {
    ElMessage({
      message: '输入不合法',
      type: 'warning'
    })
    loading.value = false
  } else {
    axios.get(`/api/user/regist/${formLabelAlign.username}/${formLabelAlign.password}/${formLabelAlign.email}/${formLabelAlign.payPassword}`)
        .finally(() => {
          ElMessage({
            message: '注册成功',
            type: 'success'
          })

          ElMessage({
            message: '3秒后跳转到登录页面',
            type: 'success'
          })

          let route = router

          setTimeout(() => {
            route.push('/login')
          } , 3000)

          loading.value = true
        })

  }
}

</script>

<style scoped>
.registerContainer{
  width: 100%;
  height: auto;
  background-color: var(--el-backtop-bg-color);
  display: flex;
  justify-content: center;
}
.content{
  margin-top: 50px;
  width: 500px;
  height: 700px;
  border: #1a1a1a solid 1px;
}
.mainContent{
  width: 80%;
  height: 600px;
  margin-left: 10%;
  margin-top: 10%;
}
</style>